<template>
	<view class="body">
	<no-more v-if="show"></no-more>
		<view class="bottom">
			<!-- <scroll-view style="height:100vh;" scroll-y="true"> -->
			<view class="box" v-for="(item,index) in list" :key="index">
				<view class="content">
					<view class="cont_txt"><text class="cont_t1">
							{{item.opinionType}}</text>/<text>{{item.opinion}}</text>
					</view>
					<view class="cont_txt2">
						{{item.creationTime}}
					</view>
					<view class="imgs">
						<image class="img" :src="child" v-for="(child,idx) in item.opinionPathList" :key="idx" @click="showImage(child,item.opinionPathList)" mode="aspectFill"></image>
					</view>
				</view>
				<view class="ft_box" v-if='item.reply != null'>
					<view class="reply">
						客服回复:{{item.reply}}
					</view>
				</view>
			</view>
			<!-- </scroll-view> -->
		</view>
	</view>
</template>

<script>
	import {
		busOpinionlist
	} from '../../../utils/myapi.js'
	import {
		baseURL
	} from '../../../utils/baseUrl.js'
	import noMore from '../../../components/no-data/no-more.vue'
	export default {
		components:{noMore},
		data() {
			return {
				show: false,
				list: [],
				pageNo:1
			}
		},
		mounted() {
			this.dataList()
		},
		onReachBottom(){
			this.pageNo ++ 
			this.dataList()
		},
		onHide(){
			this.show = false
		},
		methods: {
			async dataList() {
				const result = await busOpinionlist(this.pageNo)
				
				this.list = [...this.list,...result.result.records]
				if(!this.list.length){
					this.show = true;
					return
				}
				console.log("this.list",this.list)
			},
			showImage(currentUrl,idx){
				console.log({currentUrl,idx})
				// const imageUrls = this.imgArr.map(item => {
				// 	return item.pricturePath
				// })
				// console.log(imageUrls,'urls');
				uni.previewImage({
					urls:idx,
					current: currentUrl
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.body {
		.bottom {
			width: 100%;
			// height: 100vh;
			background: #F5F5F5;
			display: flex;
			justify-content: evenly;
			align-items: center;
			flex-direction: column;

			.box {
				width: 686rpx;
				// height: 575rpx;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;
				margin-top: 20rpx;
				padding-bottom: 29rpx;

				.content {
					// border: 1px solid red;
					width: 600rpx;
					// height: 419rpx;

					.cont_txt {
						font-family: PingFang SC-Medium, PingFang SC;

						.cont_t1 {
							font-size: 28rpx;
							font-weight: 500;
							line-height: 60rpx;
							color: #FF7F22;
						}
					}

					.cont_txt2 {
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #999999;
						line-height: 60rpx;
					}

					.imgs {
						// width: 600rpx;
						// height: 419rpx;
						display: flex;
						justify-content: space-between;
						flex-wrap: wrap;

						.img {
							width: 280rpx;
							height: 244rpx;
							margin-top: 34rpx;
						}
					}
				}

				.ft_box {
					background-color: #F5F5F5;
					width: 600rpx;
					height: 100rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					opacity: 1;
					margin-top: 18rpx;

					.reply {
						height: 100rpx;
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						font-size: 28rpx;
						margin-left: 20rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 16px;
					}
				}
			}
		}
	}
</style>